<template>
  <div>
    <div class="upLoad_img">
      <div class="title">
        上传头像：
      </div>
      <div>
        <div class="icon" @click="uploadImg" v-show="!paramsData.portraitUrl">
          <input class="upInp" v-show="false" type="file" @change="inpChange" ref="imfRef" id="uploadImg" />
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
        <img @click="uploadImg" v-if="paramsData.portraitUrl" :src="paramsData.portraitUrl" alt="" accept="image/*" />
      </div>
    </div>
    <div class="upLoad_img">
      <div class="title">
        准到校截图：
      </div>
      <div>
        <div class="icon" @click="uploadImg2" v-show="!paramsData.screenshotUrl">
          <input class="upInp" v-show="false" type="file" @change="inpChange2" ref="imfRef2" id="uploadImg2" />
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
        <img class="screenshot" @click="uploadImg2" v-if="paramsData.screenshotUrl" :src="paramsData.screenshotUrl" alt=""
          accept="image/*" />
      </div>
    </div>
    <sc-basic-form :formItems="studentFormItems" :model="studentModel" :rules="rules" label-width="140" ref="studentForm">
      <template #gradeSelect>
        <grade-select v-model:annualDepart="studentModel.annualDepart" v-model:grade="studentModel.grade"></grade-select>
      </template>
      <!-- <template #referStudent>
        <scTableSelect style="width: 100%" clearable placeholder="请选择转介绍学员" :tableWidth="600"
          :apiObj="$API.student.selectIntrodStudent" :props="{
            label: 'studentName',
            value: 'id',
          }" v-model="introdStudent" @change="introdStudentChange">
          <template #header="{ form, submit }">
            <el-form :inline="true" :model="form">
              <el-form-item label="学员姓名">
                <el-input type="text" v-model="form.studentName"></el-input>
              </el-form-item>
              <el-form-item label="家长手机">
                <el-input type="text" v-model="form.parentPhone"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">搜索</el-button>
                <el-button type="primary" @click="resetForm(form)">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
          <el-table-column prop="studentName" label="学员姓名" width="80"></el-table-column>
          <el-table-column prop="parentPhone" label="家长手机" width="120"></el-table-column>
          <el-table-column prop="parentName" label="家长姓名" width="80"></el-table-column>
          <el-table-column prop="studentBirth" label="学员生日"></el-table-column>
          <el-table-column prop="classLevel" label="年级"></el-table-column>
        </scTableSelect>
      </template>
      <template #referEmployees>
        <scTableSelect style="width: 100%" clearable placeholder="请选择转介绍员工" :tableWidth="600"
          :apiObj="$API.student.selectIntrodEmployee" :props="{
            label: 'memberName',
            value: 'id',
          }" v-model="introEmployee" @change="introEmployeeChange">
          <template #header="{ form, submit }">
            <el-form :inline="true" :model="form">
              <el-form-item label="成员信息">
                <el-input style="width: 235px" type="text" placeholder="请输入成员姓名、昵称、手机号码"
                  v-model="form.employeeInfo"></el-input>
              </el-form-item>
              <el-form-item label="成员类型">
                <el-radio-group v-model="form.employeeType">
                  <el-radio-button label="全部" value="all" class="mr10" />
                  <el-radio-button label="仅看员工" value="employee" class="mr10" />
                  <el-radio-button label="仅看教师" value="teacher" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="工作性质">
                <el-radio-group v-model="form.workType">
                  <el-radio-button label="全部" value="all" class="mr10" />
                  <el-radio-button label="全职" value="fullTime" class="mr10" />
                  <el-radio-button label="兼职" value="partTime" />
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">搜索</el-button>
                <el-button type="primary" @click="resetForm(form)">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
          <el-table-column prop="memberName" label="成员姓名"></el-table-column>
          <el-table-column prop="memberPhone" label="手机号码"></el-table-column>
          <el-table-column prop="memberQuality" label="成员性质"></el-table-column>
        </scTableSelect>
      </template> -->
      <!-- <template #footer>
      <slot name="footer">
      </slot>
    </template> -->
    </sc-basic-form>
    <!-- 就读学校、主联系人 -->
    <div>
      <!-- <div class="headmaster-list">
      <div class="item" v-for="(item, index) in paramsData.schoolInfoList" :key="index">
        <div class="select-inp">
          <div class="item-tit">就读学校：</div>
          <el-select v-model="item.schoolName" placeholder="请选择">
            <el-option
              v-for="item2 in schoolList"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value">
            </el-option>
          </el-select>
          <div class="btn">
            <el-button :icon="index == 0 ? 'el-icon-plus' : 'el-icon-minus'" @click="changeHeadmaster(index)"></el-button>
          </div>
        </div>
        <div class="select-inp">
          <div class="item-tit">就读年级：</div>
          <el-select v-model="item.className" placeholder="请选择">
            <el-option
              v-for="item2 in classList"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value">
            </el-option>
          </el-select>
        </div>
        <div class="inp">
          <div class="item-tit">班主任：</div>
          <el-input type="text" placeholder="请输入班主任姓名" v-model="item.headmaster"></el-input>
        </div>
        <div class="inp">
          <div class="item-tit">班主任手机：</div>
          <el-input type="text" placeholder="请输入班主任手机号" v-model="item.headmasterPhone"></el-input>
        </div>
      </div>
    </div> -->
      <div class="relation-list">
        <div class="item" v-for="(item, index) in paramsData.mainContacts" :key="index">
          <div v-if="item.type" class="type">
            主
          </div>
          <div class="inp">
            <div class="item-tit">联系人姓名：</div>
            <el-input type="text" placeholder="请输入班主任姓名" v-model="item.name"></el-input>
          </div>
          <div class="select-inp">
            <div class="item-tit">亲属关系：</div>
            <el-select v-model="item.relationship" placeholder="请选择">
              <el-option v-for="item2 in relationshipList" :key="item2.value" :label="item2.label" :value="item2.value">
              </el-option>
            </el-select>
            <div class="btn">
              <el-button @click="setMainContacts(index)">设为主联系人</el-button>
            </div>
          </div>
          <div class="inp">
            <div class="item-tit">联系方式：</div>
            <el-input type="text" placeholder="请输入班主任姓名" v-model="item.mobile"></el-input>
          </div>
        </div>
      </div>
      <div class="upBtn">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, defineProps, defineEmits, defineExpose } from "vue";
import GradeSelect from "../grade-select.vue";
import { studentFormItems, rules } from "./data";
const props = defineProps({
  studentInfo: {
    type: Object,
    default: () => {return {}}
  }
})
const emits = defineEmits(['update:studentInfo'])

const studentModel = computed({
  get() {
    return props.studentInfo
  },
  set(val) {
    emits('update:studentInfo', val)
  }
})

const introdStudent = ref({})
const introEmployee = ref({})

function introdStudentChange(sudent) {
  introdStudent.value = {
    studentName: sudent.studentName + " " + sudent.parentPhone,
    id: sudent.id,
  };
}
function introEmployeeChange(employee) {
  introEmployee.value = {
    memberName: employee.memberName + " " + employee.memberPhone,
    id: employee.id,
  };
}
function resetForm(form, resetValue = {}) {
  Object.keys(form).forEach((key) => {
    form[key] = resetValue[key] ?? "";
  });
}

const paramsData = reactive({
  // 就读学校等
  // schoolInfoList: [
  //   {
  //     schoolName: "",
  //     className: "",
  //     headmaster: "",
  //     headmasterPhone: ""
  //   }
  // ],
  mainContacts: [
    {
      type: true,
      name: "",
      relationship: "",
      mobile: ""
    },
    {
      type: false,
      name: "",
      relationship: "",
      mobile: ""
    }
  ],
  portraitUrl: "",
  screenshotUrl: ""
})

const schoolList = []
const classList = []
const relationshipList = reactive([
  { value: "母亲", label: "母亲" },
  { value: "父亲", label: "父亲" },
  { value: "奶奶", label: "奶奶" },
  { value: "爷爷", label: "爷爷" },
  { value: "姥姥", label: "姥姥" },
  { value: "佬爷", label: "佬爷" },
  { value: "其他", label: "其他" },
])

function changeHeadmaster(index) {
  if (index == 0) {
    paramsData.schoolInfoList.push({
      schoolName: "",
      className: "",
      headmaster: "",
      headmasterPhone: ""
    })
  } else {
    paramsData.schoolInfoList.splice(index, 1)
  }
}

function setMainContacts(num) {
  paramsData.mainContacts.forEach((t, index) => {
    index == num ? t.type = true : t.type = false
  })
}

function inpChange(e) {
  // console.log(e.target.files);
  const reader = new FileReader()
  reader.onload = function (o) {
    // console.log(o.target.result);
    paramsData.portraitUrl = o.target.result
  }
  reader.readAsDataURL(e.target.files[0])
}

function inpChange2(e) {
  const reader = new FileReader()
  reader.onload = function (o) {
    paramsData.screenshotUrl = o.target.result
  }
  reader.readAsDataURL(e.target.files[0])
}

function uploadImg() {
  const uploadInp = document.getElementById('uploadImg')
  uploadInp.click()
}

function uploadImg2() {
  const uploadInp = document.getElementById('uploadImg2')
  uploadInp.click()
}

const studentForm = ref(null)
function validate(callBackObj) {
  studentForm.value.validate(callBackObj)
}

defineExpose({ paramsData, validate })

</script>

<style lang="scss" scoped>
.mr10 {
  margin-right: 10px;
}

.upLoad_img {
  display: flex;
  padding-bottom: 10px;

  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .screenshot {
    width: 150px;
    height: auto;
    border-radius: 0;
  }

  .title {
    width: 140px;
    color: #606266;
    font-size: 14px;
    text-align: end;
    height: 34px;
    padding-right: 4px;
    line-height: 34px;
  }

  .icon {
    cursor: pointer;
    width: 120px;
    height: 120px;
    border: 3px dashed #dcdfe6;
    border-radius: 5px;
    position: relative;

    .line1 {
      width: 50px;
      height: 4px;
      background: #dcdfe6;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }

    .line2 {
      width: 3px;
      height: 50px;
      background: #dcdfe6;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }

    .upInp {
      color: transparent;
      width: 120px;
      height: 120px;
      cursor: pointer;

      input#file-upload-button {
        display: none;
      }

      input#file-upload-button {
        display: none;
      }
    }
  }
}

.headmaster-list,
.relation-list {
  .item {
    .item-tit {
      width: 140px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      text-align: end;
      padding-right: 5px;
      color: #606266;
    }

    .select-inp,
    .inp {
      display: flex;
      align-items: center;
      margin-bottom: 18px;

      .el-input {
        width: 535px;
      }
    }

    .btn {
      margin-left: 30px;
    }
  }
}

.relation-list {
  position: relative;

  .item {
    background: #cde4fc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;

    .type {
      position: absolute;
      font-size: 16px;
      color: #ffff;
      background: #409eff;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 27px;
      border-radius: 50%;
    }
  }
}

.upBtn {
  padding-left: 150px;
}
</style>
